<script setup lang="ts">
import {
    NButton, NModal, NFlex, NSelect,
    NForm, NFormItem, NInput, NRadioGroup, NRadio
    , type FormInst
} from 'naive-ui';

import { useFeature } from "~/common/mixins/";
import { type SysBasedata } from '@/apis/models';
import { useMessage } from "naive-ui";
import { reactive, ref } from 'vue';
import { useBasedataStore } from "@/store/data/basedataStore";

let basedata = useBasedataStore();
let { UpdateOne } = useFeature();

let message = useMessage();
let ruleFormRef = ref<FormInst>();
let emits = defineEmits(["handleQuery"])

let state = reactive({
    ruleForm: {} as SysBasedata,
    showModal: false
})

let labelWidth = ref(80)
let formRules = ref({
    fdKey: {
        required: true,
        message: "请输入数据名称",
        trigger: "change"
    },
    fdValue: {
        required: true,
        message: "请输入数据值",
        trigger: "blur"
    },
    fdType: {
        required: true,
        message: "请选择数据所属类别",
        trigger: "change"
    }
})

let types = ref([
    {
        label: '业务类型',
        value: 'business_type'
    }, {
        label: '房屋类型',
        value: 'house_type'
    },
])


let onSubmit = (e: MouseEvent) => {
    e.preventDefault()
    ruleFormRef.value?.validate((errors) => {
        if (!errors) {
            UpdateOne(basedata, state.ruleForm).then((res: any) => {
                if (res.code == 200) {
                    message.success("数据修改成功");
                    state.showModal = false;
                    closeDialog();
                }
            })
        }
        else {
            console.log(errors)
        }
    })
}


function openDialog(row: any) {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.showModal = true;
}

let closeDialog = () => {
    emits('handleQuery');
    state.showModal = false;
}

defineExpose({ openDialog });
</script>

<template>
    <div class="mc_1">
        <n-modal content-style="padding:10px;" style="width:38%;" title="添加基础数据" :show-icon="false" :bordered="true"
            v-model:show="state.showModal" preset="dialog">

            <template #default>
                <n-form require-mark-placement="right-hanging" ref="ruleFormRef" :rules="formRules"
                    :model="state.ruleForm" :label-width="labelWidth" label-placement="left">
                    <n-form-item path="fdKey" label="数据名称">
                        <n-input v-model:value="state.ruleForm.fdKey" placeholder="请输入数据名称"></n-input>
                    </n-form-item>
                    <n-form-item path="fdValue" label="数据值">
                        <n-input v-model:value="state.ruleForm.fdValue" placeholder="请输入数据值"></n-input>
                    </n-form-item>
                    <n-form-item path="fdType" label="数据归属">
                        <n-select placeholder="请选择数据归属" v-model:value="state.ruleForm.fdType" :options="types" />
                    </n-form-item>
                    <n-form-item :show-require-mark="true" label="数据状态">
                        <n-radio-group name="radiogroup" v-model:value="state.ruleForm.fdStatus">
                            <n-space>
                                <n-radio :value="1" key="1">
                                    启用
                                </n-radio>
                                <n-radio :value="0" key="0">
                                    禁用
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item>
                        <n-flex style="width:fit-content;position:absolute;right:0;">
                            <n-button type="primary" @click="onSubmit">确定</n-button>
                            <n-button @click="state.showModal = false">取消</n-button>
                        </n-flex>
                    </n-form-item>
                </n-form>
            </template>
        </n-modal>
    </div>

</template>

<style scoped>
.toolbar {
    padding: 10px 0 10px 10px;

    .n-button:first-child {
        margin-right: 10px;
    }
}
</style>
